<template>
	<view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<u-avatar size="140" src="/static/user.jpg" mode="circle"></u-avatar>
		<u-form class="forms" :model="loginModel" ref="form1">
			<u-form-item left-icon="account-fill"><u-input placeholder="请输入微信号"
					v-model="loginModel.username" /></u-form-item>
			<u-form-item left-icon="lock-opened-fill"><u-input placeholder="请输入密码"
					v-model="loginModel.password" /></u-form-item>
			<view class="passtext">
				忘记密码
			</view>
			<u-button @click="toIndex" :custom-style="customStyle1">登录</u-button>
			<u-button @click="toRegister" type="success" :custom-style="customStyle2">注册</u-button>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const loginModel = reactive({
		username: '',
		password: ''
	})
	const customStyle1 = reactive({
		marginTop: '60px',
		width: '100%',
		background: "#00aa00",
		color: '#fff',
	})
	const customStyle2 = reactive({
		marginTop: '20px',
		background: "#4c4c4c",
		color: '#fff',
		width: '100%',
	})
	const toIndex = ()=>{
		uni.switchTab({
			url:'../index/index'
		})
	}
	const toRegister = ()=>{
		uni.navigateTo({
			url:'../register/register'
		})
	}
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		.forms {
			width: 100%;
		}
	}

	.passtext {
		display: flex;
		color: #575757;
		margin-top: 15px;
	}
</style>